<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>   <!--引入vue.js文件-->
    <script src="element-ui/lib/index.js"></script>   <!--引入组件库-->
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">  <!--引入样式库-->
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div id="app">
    <div style="">
        <img src="ppt/n8.png" alt="#" height="1000px" width="100%"/>
    </div>
    <el-upload
            class="upload"
            action=""
            :drag="true"
            :multiple="true"
            :file-list="images"
            :http-request="uploadHttp"
            :before-upload="beforeAvatarUpload"
            :on-remove="handleRemove"
            list-type="picture">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">上传文件只能是 JPG/JPEG/PNG/MP4/MP3 格式! 图片最大1MB 音频最大50MB 视频最大300MB</div>
    </el-upload>
</div>

<script>
    new Vue({
        el:'#app',
        mounted(){

        },
        data:{
            images: [],
            uploadConf: {
                region: null,
                accessKeyId: null,
                accessKeySecret: null,
                bucket: null,
                stsToken: null,
            },
            objectName: '',
            url: '',
        },
        methods:{

            /**
             * 阿里云OSS上传
             */
            uploadHttp({ file }) {
                // 创建FormData对象，并添加文件数据
                const formData = new FormData();
                formData.append("file",file)
                // 添加输入框内容到 formData 数组
                // 创建一个包含输入框数据的对象

                // 发送POST请求到后端
                axios.post('/tools/oss', formData, {
                    "Content-Type": "multipart/form-data;charset=utf-8"
                }).then(response => {
                    console.log('上传成功', response);
                    console.log(response.data)
                    let parts = response.data.split('&&&');
                    this.url = parts[0];
                    this.objectName = parts[1];
                    console.log(this.url + this.objectName)
                }).catch(error => {
                    console.error('上传失败', error);
                });
            },
            /**
             * 图片限制
             */
            beforeAvatarUpload(file) {
                const fileType = file.name.toLowerCase();
                const isImage = /\.(jpg|jpeg|png)$/.test(fileType);
                const isVideo = /\.(mp4)$/.test(fileType);
                const isAudio = /\.(mp3)$/.test(fileType);

                let maxSizeMB;
                if (isImage) {
                    maxSizeMB = 1; // 图片最大1MB
                } else if (isAudio) {
                    maxSizeMB = 50; // 音频最大50MB
                } else if (isVideo) {
                    maxSizeMB = 300; // 视频最大300MB
                } else {
                    this.$message.error('上传文件只能是 JPG/JPEG/PNG/MP4/MP3 格式!');
                    return false;
                }

                const maxSizeBytes = maxSizeMB * 1024 * 1024;
                const isLtMaxSize = file.size / 1024 < maxSizeBytes;

                if (!isLtMaxSize) {
                    this.$message.error(`当前文件大小不能超过 ${maxSizeMB}MB!`);
                }

                return (isImage || isVideo || isAudio) && isLtMaxSize;
            },


            /**
             * 移除图片
             */
            handleRemove (file, fileList) {
                console.log('移除图片', file, fileList);
                axios.get("tools/del",{params:{objectName:this.objectName}}).then(x=>{
                    if(x.data == 'ok'){
                        this.$message({
                            message: '删除成功',
                            type: 'warning'
                        });
                    }
                })
            }
        }
    })
</script>
</body>
</html>